{% extends 'layout/mange.html'%}

{% block title %}项目列表 - Tracer平台{% endblock %}
{% block page_title %}项目管理{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <!-- 筛选栏 -->
        <div class="col-xs-12" style="margin-bottom: 20px;">
            <div class="panel panel-default card shadow-sm">
                <div class="panel-body">
                    <form method="get" class="form-inline">
                        <div class="form-group">
                            <input type="text" name="search" class="form-control" placeholder="搜索项目名称" value="{{ filter_params.search_query }}">
                        </div>
                        <div class="form-group ml-2">
                            <select name="star" class="form-control">
                                <option value="">所有项目</option>
                                <option value="starred" {% if filter_params.star_filter == 'starred' %}selected{% endif %}>已星标</option>
                                <option value="unstarred" {% if filter_params.star_filter == 'unstarred' %}selected{% endif %}>未星标</option>
                            </select>
                        </div>
                        <div class="form-group ml-2">
                            <select name="sort" class="form-control">
                                <option value="create_datetime" {% if filter_params.sort_by == 'create_datetime' %}selected{% endif %}>创建时间</option>
                                <option value="name" {% if filter_params.sort_by == 'name' %}selected{% endif %}>项目名称</option>
                            </select>
                        </div>
                        <div class="form-group ml-2">
                            <select name="order" class="form-control">
                                <option value="desc" {% if filter_params.sort_order == 'desc' %}selected{% endif %}>降序</option>
                                <option value="asc" {% if filter_params.sort_order == 'asc' %}selected{% endif %}>升序</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary ml-2">筛选</button>
                        <a href="{% url 'project_list' %}" class="btn btn-default ml-2">重置</a>
                    </form>
                </div>
            </div>
        </div>

        <!-- 星标面板 -->
        <div class="col-xs-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">星标项目</h3>
                </div>
                <div class="panel-body">
                    <!-- 星标项目内容 -->
                    {% for project in starred_projects %}
                        <div class="project-item card" style="background-color: {% if project.color == 1 %}#56b8eb{% elif project.color == 2 %}#f28033{% elif project.color == 3 %}#ebc656{% elif project.color == 4 %}#a2d148{% elif project.color == 5 %}#20BFA4{% elif project.color == 6 %}#7461c2{% elif project.color == 7 %}#20bfa3{% else %}#ffffff{% endif %}20; margin-bottom: 15px;">
                            <div style="margin-bottom: 10px;">
                                <a href="{% url 'project_detail' project.id %}" style="font-weight: bold;">{{ project.name }}</a> <span style="color: #999; font-size: 12px;">(ID: {{ project.id }})</span>
                            </div>
                            <div class="row" style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee;">
                                <div class="col-xs-6">
                                    <i class="glyphicon glyphicon-star" style="color: {% if project.star %}#f8ac59{% else %}#ddd{% endif %};"></i> {% if project.star %}已星标{% else %}未星标{% endif %}
                                </div>
                                <div class="col-xs-6 text-right">
                                    <i class="glyphicon glyphicon-user"></i> 参与人数: {{ project.join_count }}
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-center text-muted">暂无星标项目</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 我创建的面板 -->
        <div class="col-xs-12">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">我创建的项目</h3>
                </div>
                <div class="panel-body">
                    <!-- 我创建的项目内容 -->
                    {% for project in my_created_projects %}
                        <div class="project-item card" style="background-color: {% if project.color == 1 %}#56b8eb{% elif project.color == 2 %}#f28033{% elif project.color == 3 %}#ebc656{% elif project.color == 4 %}#a2d148{% elif project.color == 5 %}#20BFA4{% elif project.color == 6 %}#7461c2{% elif project.color == 7 %}#20bfa3{% else %}#ffffff{% endif %}20; margin-bottom: 15px;">

                            <div style="margin-bottom: 10px;">
                                <a href="{% url 'project_detail' project.id %}" style="font-weight: bold;">{{ project.name }}</a> <span style="color: #999; font-size: 12px;">(ID: {{ project.id }})</span>
                            </div>
                            <div class="row" style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee;">
                                <div class="col-xs-6">
                                    <i class="glyphicon glyphicon-star" style="color: {% if project.star %}#f8ac59{% else %}#ddd{% endif %};"></i> {% if project.star %}已星标{% else %}未星标{% endif %}
                                </div>
                                <div class="col-xs-6 text-right">
                                    <i class="glyphicon glyphicon-user"></i> 参与人数: {{ project.join_count }}
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-center text-muted">暂无创建的项目</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 我参与的面板 -->
        <div class="col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">我参与的项目</h3>
                </div>
                <div class="panel-body">
                    <!-- 我参与的项目内容 -->
                    {% for project in my_participated_projects %}
                        <div class="project-item card" style="background-color: {% if project.color == 1 %}#56b8eb{% elif project.color == 2 %}#f28033{% elif project.color == 3 %}#ebc656{% elif project.color == 4 %}#a2d148{% elif project.color == 5 %}#20BFA4{% elif project.color == 6 %}#7461c2{% elif project.color == 7 %}#20bfa3{% else %}#ffffff{% endif %}20; margin-bottom: 15px;">
                            <div style="margin-bottom: 10px;">
                                <a href="{% url 'project_detail' project.id %}" style="font-weight: bold;">{{ project.name }}</a> <span style="color: #999; font-size: 12px;">(ID: {{ project.id }})</span>
                            </div>
                            <div class="row" style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eee;">
                                <div class="col-xs-6">
                                    <i class="glyphicon glyphicon-star" style="color: {% if project.star %}#f8ac59{% else %}#ddd{% endif %};"></i> {% if project.star %}已星标{% else %}未星标{% endif %}
                                </div>
                                <div class="col-xs-6 text-right">
                                    <i class="glyphicon glyphicon-user"></i> 参与人数: {{ project.join_count }}
                                </div>
                            </div>
                        </div>
                    {% empty %}
                        <p class="text-center text-muted">暂无参与的项目</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}